<!--
* description: 车型配置定义
* author: duanhy
* createdDate: 2020-12-4
-->
<template>
  <div class="app-container app-container-table">
    <!-- 单表格模版页面 -->
    <div>
      <one-table-template
        ref="multipleTable"
        :dynamic-api-config="apiConfig"
        :dynamic-buttons="dynamicButtons"
        :dynamic-components="tableComponents"
        :dynamic-table-cols="dynamicTableCols"
        :dynamic-form-fields="formField"
        :dynamic-table-defult-height="225"
        :dynamic-page-size="10"
        :dynamic-is-show-more-btn="false"
        :dynamic-is-show-select="false"
        :callback-obj="callbackObj"
      />

      <el-row style="margin-top:1rem" :gutter="5">
        <!-- 车型与选装包 -->
        <el-col :span="8">
          <h3 class="filter-container filter-title">车型与选装包关系维护</h3>
          <one-table-template
            ref="multipleTable1"
            :dynamic-api-config="apiConfig"
            :dynamic-buttons="dynamicButtons1"
            :dynamic-table-cols="dynamicTableCols1"
            :dynamic-table-defult-height="225"
            :dynamic-form-fields="formField1"
            :dynamic-page-size="30"
            :dynamic-is-show-more-btn="false"
            :dynamic-is-show-select="false"
          />
        </el-col>
        <!-- 车型与车身颜色 -->
        <el-col :span="8">
          <h3 class="filter-container filter-title">车型与车身颜色关系维护</h3>
          <one-table-template
            ref="multipleTable2"
            :dynamic-api-config="apiConfig"
            :dynamic-buttons="dynamicButtons2"
            :dynamic-table-cols="dynamicTableCols2"
            :dynamic-table-defult-height="225"
            :dynamic-form-fields="formField2"
            :dynamic-page-size="30"
            :dynamic-is-show-more-btn="false"
            :dynamic-is-show-select="false"
          />
        </el-col>
        <!-- 车身与内饰颜色 -->
        <el-col :span="8">
          <h3 class="filter-container filter-title">车型与内饰颜色关系维护</h3>
          <one-table-template
            ref="multipleTable3"
            :dynamic-api-config="apiConfig"
            :dynamic-buttons="dynamicButtons3"
            :dynamic-table-cols="dynamicTableCols3"
            :dynamic-table-defult-height="225"
            :dynamic-form-fields="formField3"
            :dynamic-page-size="30"
            :dynamic-is-show-more-btn="false"
            :dynamic-is-show-select="false"
          />
        </el-col>
      </el-row>
    </div>
    <editCarConfig
      v-if="dialogShow"
      :id="id"
      :is-dialog-visible="dialogShow"
      :data-for-form="editRowData"
      :title-name="titleName"
      :name="name"
      :edit-add="editAdd"
      :edit-data="editData"
      @closeEdit="closeEdit"
    />
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import editCarConfig from './editCarConfig'
import Vue from 'vue'
import api from '@/api/apiVeData'
export default {
  name: 'CarModel',
  components: {
    OneTableTemplate,
    editCarConfig
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      }
    )
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      carConfigId: '',
      editData: {},
      titleName: '新增选装包',
      name: '',
      editAdd: '',
      id: '',
      list1: '',
      list2: '',
      list3: '',
      dialogShow: false,
      editPopupsState: 'add',
      //   editRowData: {},
      // table表格查询API配置对象
      apiConfig: api.queryCarConfig,
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '车型编码：',
              codeField: 'carConfigCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '车型名称：',
              codeField: 'carConfigCn',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            }
          ],
      // form 的表单对象
      formField: {
        carConfigCode: '',
        carConfigCn: ''
      },
      // 动态组件-按钮
      dynamicButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
            {
              compKey: 'btnKey1',
              type: 'primary',
              size: 'small',
              name: 'search',
              clickEvent: () => this.queryTable(1),
              text: '查询'
            },
            {
              compKey: 'btnKey2',
              type: '',
              size: 'small',
              name: 'reset',
              clickEvent: () => this.resets(),
              text: '重置'
            },
            {
              compKey: 'btnKey3',
              type: '',
              size: 'small',
              name: 'export',
              position: 'left',
              clickEvent: () => this.export(),
              text: '导出'
            }
          ],
      // 动态组件-表格网格列
      dynamicTableCols:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length >
          0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
          : [
            {
              prop: 'carConfigId',
              label: '车型id',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'carSeriesCode',
              label: '车系编码'
            },
            {
              prop: 'carSeriesCn',
              label: '车系名称'
            },
            {
              prop: 'carConfigCode',
              label: '车型编码'
            },
            {
              prop: 'carConfigCn',
              label: '车型名称'
            },
            {
              prop: 'isEnableCode',
              label: '状态'
            }
          ],

      dynamicButtons1: [],
      dynamicTableCols1: [
        {
          label: '操作',
          fixed: true,
          isComponent: true,
          comps: [
            {
              compKey: 'propKey1',
              labelName: '编辑',
              component: () => import('@/components/org/linkButton'),
              clickEvent: (index) => this.editCarConfig('config', 'edit', index)
            }
          ]
        },
        {
          prop: 'optionalPagCode',
          label: '选装包编码'
        },
        {
          prop: 'optionalPagName',
          label: '选装包名称'
        },
        {
          prop: 'optionalPrice',
          label: '选装包价格'
        },
        {
          prop: 'isEnableCode',
          label: '启用状态'
        }
      ],
      formField1: {
        optionalPagCode: '',
        optionalPagName: ''
      },

      dynamicButtons2: [],
      dynamicTableCols2: [
        {
          label: '操作',
          fixed: true,
          isComponent: true,
          comps: [
            {
              compKey: 'propKey1',
              labelName: '编辑',
              component: () => import('@/components/org/linkButton'),
              clickEvent: (index) => this.editCarConfig('color', 'edit', index)
            }
          ]
        },
        {
          prop: 'carColorCode',
          label: '车身色编码'
        },
        {
          prop: 'carColorName',
          label: '车身色名称'
        },
        {
          prop: 'carColorPrice',
          label: '车身色价格'
        },
        {
          prop: 'isEnableCode',
          label: '启用状态'
        }
      ],
      formField2: this.$utils.getFormField(
        this,
        {
          carcolorCode: '',
          carcolorName: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      dynamicButtons3: [],
      dynamicTableCols3: [
        {
          label: '操作',
          fixed: true,
          isComponent: true,
          comps: [
            {
              compKey: 'propKey1',
              labelName: '编辑',
              component: () => import('@/components/org/linkButton'),
              clickEvent: (index) => this.editCarConfig('interior', 'edit', index)
            }
          ]
        },
        {
          prop: 'carIncolorCode',
          label: '内饰色编码'
        },
        {
          prop: 'carIncolorName',
          label: '内饰色名称'
        },
        {
          prop: 'carIncolorPrice',
          label: '内饰色价格'
        },
        {
          prop: 'isEnableCode',
          label: '启用状态'
        }
      ],
      formField3: this.$utils.getFormField(
        this,
        {
          carIncolorCode: '',
          carIncolorName: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),

      // 单表格模版页面组件回调事件
      callbackObj: {
        // 网格单击事件
        onRowClick: (row, column, event) => {
          // this.formField.carConfigId = row.carConfigId
          this.id = row.carConfigId
          // 车型配置关系
          this.queryTableData({ carConfigId: row.carConfigId })
        }
      }
    }
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.queryTable(1)
    }, 0)
  },
  methods: {
    spanNum() {
      return 6
    },
    // 新增--编辑--选装包
    editCarConfig(type, ifAdd, index) {
      if (this.id === undefined) {
        this.$message({ message: '请选择你需要添加的车型' })
      } else {
        if (type === 'config') {
          if (ifAdd === 'edit') {
            this.titleName = '编辑车型与选装包关系'
            this.editAdd = '编辑'
            this.editData = this.$refs['multipleTable1'].list[index]
          }
          this.name = '选装包'
        }
        if (type === 'color') {
          if (ifAdd === 'edit') {
            this.titleName = '编辑车型与车身颜色关系'
            this.editAdd = '编辑'
            this.editData = this.$refs['multipleTable2'].list[index]
          }
          this.name = '车身颜色'
        }
        if (type === 'interior') {
          if (ifAdd === 'edit') {
            this.titleName = '编辑车型与内饰颜色关系'
            this.editAdd = '编辑'
            this.editData = this.$refs['multipleTable3'].list[index]
          }
          this.name = '内饰颜色'
        }
        this.dialogShow = true
      }
    },

    // 多表格分开请求
    queryTableData(formField) {
      // // 先读取参数中的传输对象
      const returnObj = {
      // api配置
        apiConfig: api.queryCarConfigLink,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: formField
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(returnObj, null, this.dynamicApiStyle)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD, this.dynamicApiStyle).then(response => {
        if (response.result === '0') {
          // this.$refs['multipleTable'].listLoading = false
          if (response.msg) {
            this.$message({
              message: response.msg,
              type: 'warn',
              duration: 2000
            })
          }
          return
        }
        // 返回json
        // this.$message({ message: response.msg })
        this.$refs['multipleTable1'].list = response.rows.optionalPagList
        this.$refs['multipleTable1'].pageTotal = response.rows.optionalPagList.length
        this.list1 = response.rows.optionalPagList
        this.$refs['multipleTable2'].list = response.rows.colorList
        this.$refs['multipleTable2'].pageTotal = response.rows.colorList.length
        this.list2 = response.rows.colorList
        this.$refs['multipleTable3'].list = response.rows.inColorList
        this.$refs['multipleTable3'].pageTotal = response.rows.inColorList.length
        this.list3 = response.rows.inColorList
        // this.dynamicFieldsData = response.rows[0]
      }).catch(err => {
        this.message({ message: err })
        this.$refs['multipleTable1'].listLoading = false
      })
    },

    // 导出
    export() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      month = (month < 10 ? '0' + month : month)
      day = (day < 10 ? '0' + day : day)
      var mydate = year.toString() + month.toString() + day.toString()
      const returnObj = {
      // api配置
        apiConfig: {
          APIUrl: '/mp/e3sh/vesale/basics/carConfigService/exportCarConfig.do'
        },
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: this.formField
      }
      returnObj.variables.dataType = 'excel'
      var paramD = this.$getParams(returnObj, null, this.dynamicApiStyle)
      this.$requestAPI(paramD).then(res => {
        this.$utils.downloadFile(res, `车型配置定义${mydate}.xlsx`)
      })
    },

    // 关闭编辑页面
    closeEdit(type) {
      if (type) {
      // 新增或编辑成功后操作
        if (type === '选装包') {
          this.$refs['multipleTable1'].list = this.list1
        }
        if (type === '车身颜色') {
          this.$refs['multipleTable2'].list = this.list2
        }
        if (type === '内饰颜色') {
          this.$refs['multipleTable3'].list = this.list3
        }
        setTimeout(() => {
          this.queryTableData({
            carConfigId: this.id
          })
        }, 1000)
      }
      this.dialogShow = false
    },
    resets() {
      this.reset()
      this.formField.carSeriesCn = ''
      this.formField.carConfigCn = ''
    }
  }
}
</script>
<style lang="css" scoped>
h3{
  margin-bottom:0;
}
</style>
